<template>
  <CustomNav title="拾光锦汉服体验店" :isShowBack="false"></CustomNav>

  <Search btnTitle="店铺选择" disabled />

  <view class="container">
    <!-- uview-plus版 -->
    <!-- 轮播图 -->
    <!-- <u-swiper
      previousMargin="30"
      nextMargin="30"
      circular
      :autoplay="true"
      radius="5"
      height="180"
      bgColor="#ffffff"
      :list="swiperListData"
    ></u-swiper> -->

    <!-- 原生版 -->
    <!-- 轮播图 -->
    <view class="banner">
      <swiper
        indicator-dots
        indicator-color="#fff"
        indicator-active-color="#ccc"
        circular
        autoplay
        interval="4000"
      >
        <swiper-item v-for="(item, index) in swiperListData" :key="index">
          <image
            :show-loading="true"
            :src="item"
            width="750rpx"
            height="400rpx"
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 最新推荐 -->
    <view class="recommend">
      <view class="head">
        <p class="newRecommend">最新推荐</p>
        <p class="viewAll" @click="handleViewMore">查看全部</p>
      </view>
      <view class="content">
        <view class="rowContainer">
          <view
            class="row"
            v-for="(item, index) in recommendList"
            :key="index"
            @click="handleViewDetails(item.id)"
          >
            <view class="title">{{ item.title }}</view>
            <view class="tag" v-if="item.type" :class="item.class">{{
              item.type
            }}</view>

            <u-image
              :lazy-load="true"
              :showLoading="true"
              :src="item.poster"
              width="200rpx"
              height="200rpx"
              radius="20rpx"
            >
              <template v-slot:loading>
                <u-loading-icon color="#ccc"></u-loading-icon>
              </template>
              <template #error>
                <view style="font-size: 24rpx">加载失败</view>
              </template>
            </u-image>
          </view>
        </view>

        <view class="schedule" @click="handleSchedule">立即预约</view>
      </view>
    </view>

    <!-- 视频 -->
    <view class="video">
      <view>视频展示</view>
      <view class="v">
        <video :src="homeStore.shopInfoData.shopVideo"></video>
      </view>
    </view>

    <!-- 地图 -->
    <view class="myMap">
      <!-- 店铺地址 -->
      <view class="shopAddr">
        店铺地址：{{ homeStore.shopInfoData?.address }}</view
      >
      <map
        style="width: 706rpx; height: 358rpx"
        show-location
        :latitude="latitude"
        :longitude="longitude"
        :scale="scale"
        :markers="markers"
        :controls="false"
        bindmarkertap="markertap"
        :show-location="true"
        bindregionchange="regionchange"
      >
      </map>
    </view>
    <!-- 联系方式 -->
    <view class="callPer">
      <!-- 联系方式 -->
      <view class="call">
        <view>微信:{{ homeStore.shopInfoData?.wx }}</view>
        <view>抖音:{{ homeStore.shopInfoData?.douyin }}</view>
        <view>电话号码:{{ homeStore.shopInfoData?.phone }}</view>
      </view>
    </view>

    <!-- 咨询按钮 -->
    <view class="consultButton" @click="handleOnlineConsultation">
      <view class="box">
        <u-icon name="kefu-ermai" color="#fff" size="22"></u-icon>
        <view class="text">在线咨询</view>
      </view>
    </view>
  </view>

  <!-- 联系官方 / 添加微信好友 -->
  <van-popup
    :show="contactContainerStatus"
    position="bottom"
    round
    root-portal
    @close="contactContainerStatus = false"
  >
    <view class="contactContainer">
      <view class="btn">
        <view class="div primary" @click="handleContact">
          <button class="officialBtn" open-type="contact"></button>
          <view>联系官方</view>
        </view>
        <view class="div default" @click="addWxFriend">
          <view>微信好友</view>
        </view>
      </view>
    </view>
  </van-popup>

  <!-- 隐私协议弹框 -->
  <!-- <view class="privacyContainer">
    <ws-wx-privacy
      id="privacy-popup"
      @disagree="handleDisagree"
      @agree="handleAgree"
      title="用户隐私保护提示"
      desc="感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意"
      protocol="《用户隐私保护指引》"
      subDesc="。当您点击同意并开始时用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。"
    ></ws-wx-privacy>
  </view> -->
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import CustomNav from "@/components/CustomNav/index.vue";
import Search from "@/components/Search/index.vue";
import { getBanner, shopInfo, showStatus, recommend } from "@/api/index";
import { Alert } from "@/utils/tool";
import useHomeStore from "@/store/modules/home";
// import wsWxPrivacy from "@/uni_modules/ws-wx-privacy/components/ws-wx-privacy/ws-wx-privacy.vue";

const homeStore = useHomeStore();

const handleDisagree = () => {
  // 处理用户不同意隐私协议的逻辑
};

const handleAgree = () => {
  // 处理用户同意隐私协议的逻辑
};

// 轮播图
const swiperListData = ref([]);

// 最新推荐
const recommendList = ref([]);

// 标记点
const markers = ref([
  {
    latitude: 34.236944,
    longitude: 109.071389,
  },
]);
// 初始纬度
const latitude = ref(34.236944);
// 初始经度
const longitude = ref(109.071389);
// 初始缩放级别
const scale = ref(14);

onMounted(() => {
  getBannerData();
  getShopInfo();
  getRecommend();
});

// 获取轮播图
const getBannerData = async () => {
  // 模拟数据
  //  swiperListData.value = [
  // 	 "https://img2.baidu.com/it/u=3595618940,3017732081&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
  // 	 "https://img2.baidu.com/it/u=1516496553,4226486893&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  // 	 "https://img1.baidu.com/it/u=689427256,2940241502&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500",
  // 	 "https://img2.baidu.com/it/u=2799907007,1812558789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
  //  ]

  // return
  const result = await getBanner();
  swiperListData.value = result.data.data
    .filter((item) => item.show)
    .map((item) => item.img);
};

// 获取最新推荐
const getRecommend = async () => {
  const result = await recommend();

  const tempType = ["优质服务", "物美价廉", "品质保障"];
  const tempClass = ["yz", "wm", "pz"];

  result.data.data.map((item, index, arr) => {
    if (index <= 2) {
      arr[index].type = tempType[index];
      arr[index].class = tempClass[index];
    }
  });

  recommendList.value = result.data.data;
  console.log("最新推荐：", result);
};

// 获取商家信息
const getShopInfo = async () => {
  const result = await shopInfo();

  const {
    address,
    wx,
    douyin,
    phone,
    qrcode,
    latitude,
    longitude,
    shopVideo,
    isShowVideo,
  } = result.data.data;

  console.log("result:", result);

  homeStore.shopInfoData.address = address;
  homeStore.shopInfoData.wx = wx;
  homeStore.shopInfoData.douyin = douyin;
  homeStore.shopInfoData.phone = phone;
  homeStore.shopInfoData.qrcode = qrcode;

  markers.value[0].latitude = latitude;
  markers.value[0].longitude = longitude;

  // latitude.value = latitude;
  // longitude.value = longitude;

  homeStore.shopInfoData.shopVideo = shopVideo;

  homeStore.showStatus = isShowVideo;

  console.log("homeStore:", homeStore);
};

// 在线咨询
const handleOnlineConsultation = () => {
  contactContainerStatus.value = true;
};

// 在线咨询
const contactContainerStatus = ref(false);
// 联系官方
const handleContact = () => {
  contactContainerStatus.value = false;
};
// 添加微信好友
const addWxFriend = () => {
  contactContainerStatus.value = false;
  uni.navigateTo({
    url: "/pagesA/onlineConsultation/index",
  });
};

// 立即预约
const handleSchedule = () => {
  uni.navigateTo({
    url: "/pagesA/appointment/index",
  });
};

// 查看照片详情
const handleViewDetails = (id) => {
  uni.navigateTo({
    url: `/pagesB/photoDetails/index?id=${id}`,
  });
};

// 查看更多
const handleViewMore = () => {
  uni.switchTab({
    url: "/pages/guestFilm/index",
  });
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;

  .banner {
    width: 100%;
    height: 400rpx;
    // margin-top: 30rpx;

    swiper {
      height: 100%;
      width: 100%;
    }

    image {
      width: 100%;
      height: 400rpx;
    }
  }

  // 最新推荐
  .recommend {
    padding: 30rpx;
    background-color: #efefef;
    margin-bottom: 25rpx;

    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15rpx;

      .newRecommend {
        color: #101010;
      }

      .viewAll {
        color: #b2b3b2;
        font-size: 24rpx;
        margin-right: 10px;
      }
    }

    .content {
      width: 100%;
      background-color: #ffffff;
      border-radius: 30rpx;
      padding: 30rpx 0;

      .rowContainer {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .row {
          display: flex;
          flex-direction: column;
          margin-bottom: 20rpx;

          .title {
            font-size: 28rpx;
            margin-bottom: 10rpx;
            font-weight: 600;
            color: #4a4a4a;
          }

          .tag {
            font-size: 24rpx;
            margin-bottom: 10rpx;
          }

          // 优质服务
          .yz {
            color: #c34161;
          }
          // 物美价廉
          .wm {
            color: #eba34e;
          }
          // 品质保证
          .pz {
            color: #57a2e8;
          }

          .van-image {
            margin-top: 10rpx;
          }
        }
      }

      .schedule {
        display: inline-block;
        padding: 20rpx 55rpx;
        border-radius: 50rpx;
        color: #fff;
        font-size: 28rpx;
        background-color: $btn;
        box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
        border: 1px solid #ee9324;
        margin-top: 20rpx;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  // 视频
  .video {
    // padding: 30rpx;
    // background-color: #efefef;
    margin-bottom: 40rpx;
    padding: 0 30rpx;

    .v {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      width: 100%;

      video {
        width: 100%;
      }
    }
  }

  .myMap {
    padding: 0 30rpx;

    .shopAddr {
      margin-bottom: 10rpx;
      font-size: 28rpx;
    }
  }

  .callPer {
    padding: 0 30rpx;
    margin-top: 20rpx;
    .call {
      view {
        height: 40rpx;
        font-size: 28rpx;
        margin-bottom: 15rpx;
      }
    }
  }

  .consultButton {
    position: fixed;
    z-index: 1;
    height: 90rpx;
    width: 90rpx;
    border-radius: 50%;
    border: none;
    background: #ffb61e;
    right: 15px;
    bottom: 40px;

    .box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .text {
        font-size: 17rpx;
        color: #fff;
      }
    }
  }
}

.contactContainer {
  height: 300rpx;

  // 官方按钮
  .officialBtn {
    position: absolute;
    height: 211rpx;
    width: 336rpx;
    background-color: transparent;

    &::after {
      border: none;
    }
  }

  .btn {
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;

    .div {
      flex: 1;
      height: 220rpx;
      margin: 25rpx 20rpx;
      font-size: 60rpx;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 30rpx;

      &:active {
        transition: all 0.2s;
        opacity: 0.7;
      }
    }

    .primary {
      background-color: #07c160;
    }

    .default {
      background-color: #1989fa;
    }
  }

  .alert {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #b7b7b7;
  }
}

.privacyContainer {
  position: fixed;
  z-index: 99999999999999999999999999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000078;
}
</style>
